<template>
  <div class="table-wrapper">
    <!-- 表格 -->
    <el-table :data="data" class="table" v-bind="tableProps" row-key="id">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        v-bind="column"
      >
        <template slot-scope="scope">
          <span v-if="column.needSlot">
            <slot
              :row="scope.row"
              :col="column"
              :data="scope.row[column.prop]"
            />
          </span>
          <span v-else-if="!column.prop">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next, sizes"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      @current-change="onPageChange"
      @size-change="onPageSizeChange"
    />
  </div>
</template>

<script>
export default {
  // model: {
  //   prop: 'currentPage',
  //   event: 'on-page-change',
  // },
  props: {
    // element table支持的props
    tableProps: Object,
    // 为v-model准备的
    // 为.sync准备的
    currentPage: Number,
    data: Array,
    columns: Array,
    total: {
      type: Number,
      default: 0
    },
    // 为.sync准备的
    pageSize: {
      type: Number,
      default: 10
    }
  },
  methods: {
    // 改变分页事件
    onPageChange(currentPage) {
      // 触发改变v-model值的方法
      // this.$emit('on-page-change', currentPage);
      // 改变props的方法
      this.$emit('update:currentPage', currentPage)
    },
    // 改变分页条数事件
    onPageSizeChange(size) {
      this.$emit('update:pageSize', size)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  .table {
    width: 100%;
  }
}
</style>
